<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../js/vue.js"></script>
        <script src="../js/vue-router.js"></script>
    </head>
    <body>
        <!-- 1引入文件
        2创建路由对象 new VueRouter()
        3创建路由配置   routes
        4配置具体路由   name path component
        5创建路由映射的组件 component
        6注入路由 router
        7指定路由映射的组件所展示的区域 router-view
        8用router-link 组件来导航 -->
        <div id="app">
            <router-link to='/index'>首页</router-link>

            <!-- 2传递路由参数 -->
            <router-link to='/login/1'>佩奇</router-link>
            <router-link to='/login/2'>乔治</router-link>
            <router-link to='/login/3'>猪爸爸</router-link>
            <router-link to='/login/4'>猪妈妈</router-link>
            <router-view></router-view>
        </div>
        <script>
            var Index = Vue.component('index',{
                template : '<h2>首页</h2>'
            })
            var Login = Vue.component('login',{
                template : `<div><h2>不是首页</h2><p>{{type}}</p></div>`,
                data(){
                    return {
                        type : '???'
                    }
                },
                watch : {
                    // 通过watch来监听路由的变化
                    '$route'(to,from)
                },
                mounted(){
                    // 3通过this.$route可以获取相关的数据 如参数，
                    // 这种操作存在的问题：组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，
                    // 复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用
                    // console.log(this.$route)
                    var id = this.$route.params.name;
                    if(id==1){
                        this.type='这是一头野猪'
                    }else if(id==2){
                        this.type='这是一头恐龙'
                    }else if(id==3){
                        this.type='这是一头母猪'
                    }else if(id==4){
                        this.type='这是一头公猪'
                    }
                }
            })
            var router = new VueRouter({
                routes : [
                    {
                        name : 'Index',
                        path : '/index',
                        component : Index
                    },
                    {
                        name : 'Login',
                        path : '/login/:name',//1 配置路由参数
                        component : Login
                    },
                ]
            })
            var vm = new Vue({
                el: '#app',
                router,
                data: {

                }
            })
        </script>
    </body>
</html>